<template>
	<view class="login-order-list">

		<template v-if="orderData.list && orderData.list.length > 0">
			<view class="order-card" v-for="item in orderData.list" :key="item.id">
				<view class="card-header">
					<view class="header-title">
						<view class="title-left">{{ item.productName }}</view>
						<view class="title-right">
							{{ item.orderStatusDetails == -1 ? '其他' : orderStatusEnum[item.orderStatusDetails] }}
						</view>
					</view>
				</view>
				<view class="order-center">
					<view class="top">
						<text>订单号：{{ item.orderNo }}</text>
					</view>
					<view class="bottom">
						<text>购买时间：{{ item.signTime }}</text>
					</view>
				</view>
				<!--  -->
				<view class="order-bottom">
					<view class="btn-equity-go-con">
						<button class="btn-equity-go" @click="btnEquity(item)">领取权益</button>
					</view>
				</view>
			</view>
			<uni-load-more :status="orderData.loadStatus"></uni-load-more>
		</template>
		<template v-else>
			<view class="" style="margin-top: 60rpx; text-align: center; color: #8b8b8b">当前无权益</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from 'pinia';
	import initApi from '@/apis/init.js';
	import {
		constStore
	} from '@/store/const.js';

	import {
		enumStore
	} from '@/store/enum.js';
	const {
		constInfo
	} = constStore();

	//引入防抖函数
	const props = defineProps({
		productType: {
			type: String,
			default: ''
		}
	});

	const {
		orderStatusEnum,
		orderStatusBtnEnum
	} = enumStore();


	const orderData = reactive({
		params: {
			pageNum: 1,
			pageSize: 20,
			condition: {
				supplierCodeList: [],
				productCodeList: [],
				orderNo: null,
				orderStatus: null,
				orderTimeStart: null,
				orderTimeEnd: null
			},
			orders: ['updated_time desc']
		},
		loadStatus: 'loading',
		list: [],
		total: 0
	});

	const btnEquity = (item) => {
		console.log('btnEquity', item);
		//  判断 失败的不能进入
		let URL = null;
		if (props.productType) {
			URL = '/pages/lhhy/equity?' + 'orderNo=' + item.orderNo + '&productType=' + props.productType;
		} else {
			URL = '/pages/lhhy/equity?' + 'orderNo=' + item.orderNo + '&productType=' + item.supplierCode;
		}
		uni.navigateTo({
			url: URL,
			params: {
				orderNo: item.orderNo
			}
		});
	};
	onMounted((query) => {
		console.log('onMounted    order list===>>>', query);
		getOrderList();
	});
	/* 触底加载 */
	onReachBottom(() => {
		handleLoadMore();
	});
	/* 下拉刷新 */
	onPullDownRefresh(() => {
		refresh();
	});
	/* 分页加载 */
	const getOrderList = async () => {
		return initApi
			.getOrderPage(orderData.params)
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					orderData.list = orderData.params.pageNum == 1 ? res.data.records : [...orderData.list, ...
						res.data.records
					];
					orderData.loadStatus = res.data.records.length < orderData.params.pageSize ? 'noMore' :
						'more';
				}
			})
			.catch((err) => {
				console.log(e, '分页加载 getOrderList');
				orderData.loadStatus = 'more';
				if (orderData.params.pageNum > 1) {
					orderData.params.pageNum = orderData.params.pageNum - 1;
				}
			});
	};
	const handleLoadMore = () => {
		if (orderData.loadStatus != 'more') {
			return;
		}
		orderData.params.pageNum = orderData.params.pageNum + 1;
		getOrderList();
	};
	const refresh = () => {
		orderData.params.pageNum = 1;
		getOrderList().finally(() => {
			uni.stopPullDownRefresh();
		});
	};
</script>

<style lang="scss" scoped>
	.login-order-list {
		.order-card {
			box-sizing: border-box;
			width: 700rpx;
			height: 392rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 30rpx;

			.order-bottom {
				margin-top: 20rpx;
				display: flex !important;
				justify-content: flex-end !important;

				.btn-equity-go {
					width: 180rpx;
					background-color: #409eff;
					font-size: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
				}
			}

			.order-center {
				width: 640rpx;
				height: 183rpx;
				background: #f5faf9;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #28333d;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				// padding-left: 28rpx;
				text {
					padding-left: 28rpx;
				}
			}

			.card-header {
				display: flex;
				// padding: 0 30rpx;

				.header-title {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.title-left {
						font-weight: 400;
						font-size: 28rpx;
						color: #28333d;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 溢出部分用省略号代替 */
					}

					.title-right {
						font-weight: 400;
						font-size: 20rpx;
						color: #eda55e;
						line-height: 23rpx;
					}
				}
			}
		}

		.tabs-type {
			margin-top: 48rpx;
		}
	}

	.no-order-list {
		margin-top: 48rpx;
		font-weight: 300;
		font-size: 24rpx;
		color: #8b8b8b;
		line-height: 28rpx;
	}

	.uni-margin-wrap {
		margin-top: 100rpx;

		.image-con {
			height: 400rpx;
			text-align: center;
			border-radius: 40rpx;

			.banner-image {
				border-radius: 40rpx;
			}
		}
	}
</style>